<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <div class="">
        <van-field required v-model="postData.school_Na" size="large" label="学校名称" maxlength="20" placeholder="请填写" style="font-size: 16px" />

        <van-field required readonly clickable size="large" :value="eduVal" label="学历水平" placeholder="请选择" style="font-size: 16px" @click="showPicker_edu = true" />
        <van-popup v-model="showPicker_edu" round position="bottom">
          <van-picker title="学历水平" show-toolbar :columns="picker_edu_data" :default-index="picker_edu_defaultIndex" value-key="codeValue" @confirm="onPickerEduSubmit" @cancel="showPicker_edu = false" />
        </van-popup>

        <van-field readonly clickable size="large" :value="eduStartDate" label="入学时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_eduStartDate = true" />
        <van-popup v-model="showPicker_eduStartDate" round position="bottom">
          <van-datetime-picker v-model="picker_eduStartDate_current" :min-date="picker_eduStartDate_minDate" :max-date="picker_eduStartDate_maxDate" type="date" title="入学时间" @confirm="onPickerEduStartDateSubmit" @cancel="showPicker_eduStartDate = false" />
        </van-popup>

        <van-field readonly clickable size="large" :value="eduEndDate" label="毕业时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_eduEndDate = true" />
        <van-popup v-model="showPicker_eduEndDate" round position="bottom">
          <van-datetime-picker v-model="picker_eduEndDate_current" :min-date="picker_eduEndDate_minDate" :max-date="picker_eduEndDate_maxDate" type="date" title="毕业时间" @confirm="onPickerEduEndDateSubmit" @cancel="showPicker_eduEndDate = false" />
        </van-popup>

        <van-field readonly clickable size="large" :value="zyVal" label="所学专业" placeholder="请选择" style="font-size: 16px" @click="showPicker_zy = true" />
        <van-popup v-model="showPicker_zy" round position="bottom">
          <van-cascader title="所学专业" :options="select_zy_data" active-color="#05A6F0" :value="picker_zy_defaultIndex" @finish="onPickerZYSubmit" @close="showPicker_zy = false" />
        </van-popup>

        <div class="resume-content-tip">
          <span>简短描述</span>
          <van-field v-model="postData.content" show-word-limit maxlength="100" rows="10" autosize type="textarea" placeholder="简短描述" style="font-size: 16px;color: #333;line-height: 22px;" />
        </div>

        <div style="margin: 16px">
          <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" :disabled="disabled_submit" @click="onSubmit">
          </van-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { Field, Picker, Popup, Button, Toast, DatetimePicker, Cascader } from 'vant';
import { getDoubleArrayMix } from '@/util/selectData'
import { mixin_person_resumeSumbitBack } from '@/mixin/mixins'
import Global from '@/Global';
export default {
  name: 'ResumeEdu',
  components: {
    NavBar,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Cascader.name]: Cascader,
  },
  props: ['title', 'data'],
  mixins: [mixin_person_resumeSumbitBack],
  mounted() {
    this.getEdu();

  },
  // 定义属性
  data() {
    return {
      postData: {
        id: 0,
        school_Na: '',
        level_Edu: '',
        educationID: '',
        date_Time: '',
        specialty: '',
        content: '',
      },
      eduStartDate: '',
      eduEndDate: '',

      showPicker_edu: false,
      picker_edu_data: this.$bd.edu,
      picker_edu_defaultIndex: 0,

      showPicker_eduStartDate: false,
      picker_eduStartDate_current: new Date(2000, 0, 1),
      picker_eduStartDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_eduStartDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_eduEndDate: false,
      picker_eduEndDate_current: new Date(2000, 0, 1),
      picker_eduEndDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_eduEndDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_zy: false,
      picker_zy_defaultIndex: '',

      eduVal: '',
      zyVal: '',
      loading_submit: false,

    }
  },
  computed: {
    datetime() { return `${this.eduStartDate}/${this.eduEndDate}`; },
    select_zy_data() {
      return getDoubleArrayMix(this.$bd.specialtyGrade1, this.$bd.specialtyGrade2);
    },
    disabled_submit() {
      if (this.postData.school_Na != "" && this.postData.level_Edu != "" && this.postData.specialty != "" && this.eduStartDate != "" && this.eduEndDate != "") { return false; } return true;
    },
    disabled_submit() {
      // if (this.postData.shcoolName != '' && this.postData.eduID != '')
      //   return false;
      // return true;
    }
  },
  // 方法集合
  methods: {
    //获取
    getEdu() {
      let eduId = this.$route.params.data ? this.$route.params.data.id : 0;
      if (eduId != 0) {
        this.$api.get('/Resume/GetEduByID', { eduId: eduId }).then(res => {
          if (res.success) {
            this.postData.id = res.response.id;
            this.postData.school_Na = res.response.school_Na;
            this.postData.level_Edu = res.response.level_Edu;
            this.eduVal = res.response.level_EduValue;
            this.eduStartDate = res.response.fmEduStartDate;
            this.eduEndDate = res.response.fmEduEndDate;
            this.postData.specialty = res.response.specialty;
            this.zyVal = res.response.specialtyValue;
            this.postData.content = res.response.content;
          }
        })
      }
    },
    //学历
    onPickerEduSubmit(item) {
      this.showPicker_edu = false;
      this.postData.level_Edu = item.code;
      this.eduVal = item.codeValue
    },
    //入学时间
    onPickerEduStartDateSubmit(value) {
      this.showPicker_eduStartDate = false;
      this.eduStartDate = this.$dayjs(value).format("YYYY-MM");
    },
    //毕业时间
    onPickerEduEndDateSubmit(value) {
      this.showPicker_eduEndDate = false;
      this.eduEndDate = this.$dayjs(value).format("YYYY-MM");
    },
    //专业
    onPickerZYSubmit({ value, selectedOptions }) {
      this.showPicker_zy = false;
      this.postData.specialty = value;
      this.zyVal = selectedOptions[1].text;
    },
    //提交
    onSubmit() {
      this.loading_submit = true;
      this.postData.date_Time = this.datetime;
      this.$api.post('/Resume/SaveEdu', this.postData).then(res => {
        this.loading_submit = false;
        if (res.success) {
          Toast.success(res.msg);
          this.$emit(Global.bus_person_resume_update);
          this.goBack();
        }
        else {
          Toast('保存失败')
        }
      })
    },
  },
}
</script>

<style scoped>
.resume-content-tip {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.resume-content-tip span {
  padding: 16px 16px 8px;
  font-size: 16px;
  color: #646566;
  line-height: 16px;
}
</style>